<script setup lang="ts">
import { Search, Check } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';

// 获取数据
onMounted(() => { 
    getList()
})

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({
                id: i + 1, 
                title: '大闹地府，篡改生死簿', 
                trialname: '察查司 - 陆之道', 
                trialnamed: '孙悟空', 
                life: '500', 
                type: '天产石猴', 
                trialtime: '贞观555年',
                trialResult: '打不过，禀奏玉帝',
                status: '已审判',
                operationStatus: 1
            });
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}

// tab
const radioValue = ref(1)
const onTabChange = (e: any) => {
    console.log(e);
}

// 筛选
const optionsValue = ref()
const optionsType = ref([
    {label: '察查司 - 陆之道', value: 1},
    {label: '赏善司 - 魏征', value: 2},
    {label: '罚恶司 - 钟馗', value: 3},
    {label: '阴律司 - 崔珏', value: 4}
])

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 弹框
const isShow = ref(false)
const radio = ref(1)
const trialData = ref({
    id: '',
    title: '',
    trialname: '',
    trialtime: '',
    content: ''
});
const onApprove = () => {
    isShow.value = false
    const id = trialData.value.id
    data.list.forEach((item: any) => {
        if(item.id === id) {
            item.operationStatus = 2;
        }
    })
}

// 查看详情
const bindFind = (row: any) => {
    trialData.value = {
        id: row.id,
        title: row.title,
        trialname: row.trialname,
        trialtime: row.trialtime,
        content: `
        <div>众鬼卒奔上森罗殿，报着：“大王！祸事！祸事！外面一个毛脸雷公，打将来了！”</div>
        <div>慌得那十代冥王急整衣来着；见他相貌凶恶，即排下班次，应声高叫道：“上仙留名！上仙留名！”猴王道：“你既不认得我，怎么差人来勾我？”十王道：“不敢！不敢！想是差人差了。”猴王道：“我本是花果山水帘洞天生圣人孙悟空。你等是甚么官位？”十王躬身道：“我等是陰间天子十代冥王。”悟空道：“快报名来，免打！”十王道：“我等是秦广王、初江 王、宋帝王、忤官王、阎罗王、平等王、泰山王、都市王、卞城王、转轮王。”悟空道：“汝等既登王位，乃灵显感应之类，为何不知好歹？我老孙修仙了道，与天齐寿，超升三界之外，跳出五行之中，为何着人拘我？”十王道：“上仙息怒。普天下同名同姓者多，或是那勾死人错走了也？”悟空道：“胡说！胡说！常言道：‘官差吏差，来人不差。’你快取生死簿子来我看！”十王闻言，即请上殿查看。</div>
        <div>悟空执着如意棒，径登森罗殿上，正中间南面坐上。十王即命掌案的判官取出文簿来查。那判官不敢怠慢，便到司房里，捧出五六簿文书并十类簿子，逐一查看。裸虫、毛虫、羽虫、昆虫、鳞介之属，俱无他名。又看到猴属之类，原来这猴似人相，不入人名；似裸虫，不居国界；似走兽，不伏麒麟管；似飞禽，不受凤凰辖。另有个簿子，悟空亲自检阅，直到那魂字一千三百五十号上，方注着孙悟空名字，乃天产石猴，该寿三百四十二岁，善终。悟空道：“我也不记寿数几何，且只消了名字便罢！取笔过来！”那判官慌忙捧笔，饱掭浓墨。悟空拿过簿子，把猴属之类，但有名者，一概勾之-下簿子道：“了帐！了帐！今番不伏你管了！”一路棒，打出幽冥界。那十王不敢相近，都去翠云宫，同拜地藏王菩萨，商量启表，奏闻上天，不在话下。</div>
        `
    }
    isShow.value = true
}
</script>

<template>
    <!-- 审判记录 -->
    <div class="trial">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-radio-group v-model="radioValue" size="large"  @change="onTabChange">
                        <el-radio-button :label="1">全部</el-radio-button>
                        <el-radio-button :label="2">未审判</el-radio-button>
                        <el-radio-button :label="3">审判中</el-radio-button>
                        <el-radio-button :label="4">已审判</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="option-item">
                    <el-select v-model="optionsValue" placeholder="请选择审判者" size="large" clearable>
                        <el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="data.loading" :max-height="710" size="large">
                <el-table-column prop="id" label="id" width="100" />
                <el-table-column prop="title" label="审判内容" width="200" show-overflow-tooltip />
                <el-table-column prop="trialname" label="审判者" />
                <el-table-column prop="trialnamed" label="被审判者" />
                <el-table-column prop="life" label="寿命（岁）" />
                <el-table-column prop="type" label="类别" />
                <el-table-column prop="status" label="审判状态" />
                <el-table-column prop="trialtime" label="审判时间" />
                <el-table-column prop="trialResult" label="审判结果" show-overflow-tooltip />
                <el-table-column label="操作" align="center" width="160" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link @click="bindFind(scope.row)" v-if="scope.row.operationStatus === 1">审批</el-button>
                        <el-button type="primary" link disabled v-if="scope.row.operationStatus === 2">已审批</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>

        <!-- 弹框 -->
        <el-drawer v-model="isShow" direction="rtl" :with-header="false" size="35%">
            <p class="z-t-bold z-font-30">{{ trialData.title }}</p>
            <div class="z-m-t-20 z999999 z-font-15">
                <span class="z-m-r-10">{{ trialData.trialtime }}</span>
                <span>{{ trialData.trialname }}</span>
            </div>
            <el-divider></el-divider>
            <div class="z666666" style="line-height: 34px;text-indent: 2rem;" v-html="trialData.content"></div>
            <el-divider></el-divider>
            <div class="z-flex-align-center z-flex-justify-between">
                <div>
                    <el-radio v-model="radio" :label="1" size="large">轮回司执行</el-radio>
                    <el-radio v-model="radio" :label="2" size="large">地狱司执行</el-radio>
                </div>
                <el-button type="success" size="large" :icon="Check" @click="onApprove">审批完成</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<style scoped lang="scss">
.el-select{display: block;}
</style>